<!DOCTYPE HTML>
<html>
<head>
    <title>Todo</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/editor/common.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<body  style="padding: 0;width: 100%;height: 100%">
<div class="mini-splitter" style="width:100%;height:97%;">
    <div size="240" showCollapseButton="true">
        <div class="mini-fit">
            <ul id="tree1" class="mini-tree"  url="/getdata/goodsMangerTree" style="width:100%;"
                showTreeIcon="true" textField="name" idField="id" parentField="pid" resultAsTree="false"
            >
            </ul>
        </div>
    </div>
    <div showCollapseButton="true">
        <div id="outImg">
            <img id="imgId" src="" alt="" onclick="smallImg()">
        </div>
        <div style="padding: 5px">
            <span>店铺名称：</span><input id="btnEdit1" class="mini-buttonedit" onbuttonclick="onButtonEdit" name="a" textName="b"/>
            <span>商品名称：</span><input  class="mini-textbox" type="text" id="title"/>
            <span>商品id：</span><input  class="mini-textbox" type="text" id="objectId"/>
            <span>商品状态：</span><input id="status" class="mini-combobox"  data="goodsStatus" />
            <a class="mini-button" iconCls="icon-search" onclick="search()">查找</a>
        </div>
        <div style="width:99%;">
            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
                <table style="width:100%;">
                    <tr>
                        <td style="width:100%;">
                            <a class="mini-button" iconCls="icon-add" onclick="goodsAdd()">增加</a>
                            <a class="mini-button" iconCls="icon-add" onclick="allGoods()">全部商品</a>
                            <a class="mini-button" iconCls="icon-edit" onclick="goodsEdit()">编辑</a>
                            <!--<a class="mini-button" iconCls="icon-remove" onclick="remove()">删除</a>-->
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="datagrid1" class="mini-datagrid" style="width:99%;height: 82%;"
             url="/getdata/goodsMangerInformation" idField="id" allowResize="true"
             sizeList="[20,30,50,100]" pageSize="30"
        >
            <div property="columns">
                <div type="checkcolumn" ></div>
                <div field="objectId" width="120" headerAlign="center" allowSort="true" >objectId</div>
                <div field="title" width="80" headerAlign="center" allowSort="true" >商品名称</div>
                <div field="shopIcon"  width="70" align="center" headerAlign="center" renderer="onGenderRenderer" allowSort="true" >商品iocn</div>
                <div field="goodsType" align="center" width="50" headerAlign="center" allowSort="true">商品分类</div>
                <div field="status" renderer="statusRenderer" align="center" width="50" headerAlign="center" allowSort="true">商品状态</div>
                <div field="groupBuying" renderer="groupBuyingRenderer" align="center" width="50" headerAlign="center" allowSort="true">能否团购</div>
                <div field="freePost" renderer="freePostRenderer" align="center" headerAlign="center" width="50" allowSort="true" >包邮</div>
                <div field="promotePrice" align="center" width="50" headerAlign="center" allowSort="true">推广佣金</div>
                <div field="shopName"  width="100" align="center" headerAlign="center" allowSort="true">店铺名称</div>
                <div field="groupPrice" align="center" headerAlign="center" width="50" allowSort="true" >团购价格</div>
                <div field="saleNums" align="center" headerAlign="center" width="40" allowSort="true" >销量</div>
                <div field="originalPrice" align="center" headerAlign="center" width="40" allowSort="true" >原价</div>
                <div field="describe" align="center" headerAlign="center" width="100" allowSort="true" >商品描述</div>
                <div field="discount" align="center" headerAlign="center" width="50" allowSort="true" >商品折扣</div>
                <div field="price" align="center" headerAlign="center" width="50" allowSort="true" >价格</div>
                <div field="customize" renderer="customizeRenderer" align="center" headerAlign="center" width="70" allowSort="true" >能否订制</div>
                <div field="stock" align="center" headerAlign="center" width="50" allowSort="true" >库存</div>
                <div field="createdAt" width="100" align="center" headerAlign="center"  allowSort="true">创建日期</div>
                <div field="updatedAt" width="100" align="center" headerAlign="center"  allowSort="true">更新日期</div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var goodsStatus = [{ id: 1, text: '上架' }, { id: 0, text: '下架'}, {id:-1,text: '删除'},{id:2,text:'隐藏'},{id:'',text:'全部'}];
    var flag = 1;
    mini.parse();
    var grid = mini.get("datagrid1");
    var tree = mini.get("tree1");
    tree.on("nodeselect", function (e) {
        var shopOId = mini.get("btnEdit1").getValue();
        if (e.isLeaf) {
            if(shopOId!=""){
                grid.load({
                    dept_id: e.node.objectId,
                    shopOId:shopOId,
                });
            }else{
                grid.load({
                    dept_id: e.node.objectId,
                });
            }
        } else {
            grid.setData([]);
            grid.setTotalCount(0);
        }
    });
    grid.load();
    grid.on("drawcell", function (e) {
        var  value = e.value;
        column = e.column;
        //将性别文本替换成图片
        if (column.field == "shopIcon") {
            if(value) {
                e.cellHtml = '<img class="bigImg" onclick="bigImg()" src="' + value + '?imageMogr2/thumbnail/640x/format/jpg/interlace/1/auto-orient" width="30" height="30" alt="图片">';
            }else{
                e.cellHtml = '<img class="bigImg" onclick="bigImg()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }
    });

    function search() {
        var title = mini.get("title").getValue();
        var objectId = mini.get("objectId").getValue();
        var status = mini.get("status").getValue();
        var shopOId = mini.get("btnEdit1").getValue();
        grid.load({
            title: title,
            objectId:objectId,
            status:status,
            shopOId:shopOId,
        });
    }
    $("#title,#objectId").bind("keydown", function (e) {
        if (e.keyCode == 13) {
            search();
            var btnEdit1 = mini.get("btnEdit1");
            btnEdit1.setText("");
            btnEdit1.setValue("");
        }
    });


    function allGoods() {
        grid.load();
        var btnEdit1 = mini.get("btnEdit1");
        btnEdit1.setText("");
        btnEdit1.setValue("");
    }
    function goodsEdit() {
        var row = grid.getSelected();
        if (row) {

            mini.open({
                url: "/getdata/goodsEdit?id="+row.objectId,
                title: "编辑商品信息", width: 600, height: 550,

                ondestroy: function (action) {

                    grid.reload();

                }
            });

        } else {
            alert("请选中一条记录");
        }
    }

    function goodsAdd() {
        mini.open({
            url: "/getdata/goodsAdd",
            title: "编辑商品信息", width: 700, height: 700,

            ondestroy: function (action) {

                grid.reload();

            }
        });
    }

    function bigImg() {
        var row = grid.getSelected();
        if (row) {
            if(flag==1) {
                var path = row.shopIcon;
                $("#imgId").attr('src', path);
                $("#outImg").css('display','block');
            }
        }
    }
    function smallImg() {
        $("#outImg").css('display','none');
    }

    function statusRenderer(e) {
        var value = e.value;
        if (value==-1) {
            return (value, '删除')
        }else if(value==0){
            return (value, '下架')
        }else if(value==1){
            return (value, '上架')
        }else {
            return (value, '隐藏')
        }
    }
    function groupBuyingRenderer(e) {
        var value = e.value;
        if (value==1) {
            return (value, '可以')
        }else if(value==0){
            return (value, '不可以')
        }
    }
    function recommendRenderer(e) {
        var value = e.value;
        if (value==1) {
            return (value, '已推荐')
        }else if(value==0){
            return (value, '未推荐')
        }
    }
    function freePostRenderer(e) {
        var value = e.value;
        if (value==1) {
            return (value, '包邮')
        }else if(value==0){
            return (value, '不包邮')
        }
    }
    function customizeRenderer(e) {
        var value = e.value;
        if (value==1) {
            return (value, '可以定制')
        }else if(value==-1){
            return (value, '不能定制')
        }
    }

    function onButtonEdit(e) {
        var btnEdit = this;
        mini.open({
            url: "/editor/shopList",
            title: "选择列表",
            width: 700,
            height: 450,
            ondestroy: function (action) {
                //if (action == "close") return false;
                if (action == "ok") {
                    var iframe = this.getIFrameEl();
                    var data = iframe.contentWindow.GetData();
                    data = mini.clone(data);    //必须
                    if (data) {
                        btnEdit.setValue(data.id);
                        btnEdit.setText(data.text);
                        grid.load({
                            shopOId:data.id,
                        });
                    }
                }else if(action=="cancel"){
                    var iframe = this.getIFrameEl();
                    var data = iframe.contentWindow.GetData();
                    btnEdit.setValue(data.id);
                    btnEdit.setText(data.text);
                }

            }
        });

    }
</script>
</html>